<template>
  <div class="layouts-admin">
    <div class="aic jcb cP">
      <LltHeader :isCollapse="isCollapse" />
    </div>

    <div class="llt-layouts-body-admin fd">
      <div>
        <el-menu
          :collapse-transition="true"
          :default-active="state.defaultActive"
          style="width: 200px; margin-right: 15px; flex-shrink: 0"
          :background-color="$store.state.themeCurrentMenuItem.ColorBg"
           @select="handleSelect"
        >
          <el-menu-item index="1">
              <template #title> 个人信息</template>
            </el-menu-item>
             <el-menu-item index="2">
              <template #title> 密码设置</template>
            </el-menu-item>
        </el-menu>
      </div>
      <!-- 个人信息 -->
      <el-scrollbar class="maxHeight white-bg flex1">
        <!-- 个人中心 start -->
        <div v-if="state.defaultActive==1">
          <div class="p20">
            <el-form ref="ruleFormRefuser"
            :rules="rules" :model="state.userInfo" label-width="120px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="state.userInfo.username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="state.userInfo.email"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="state.userInfo.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitUser(ruleFormRefuser)">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
          <!-- 个人中心 end -->
                  <!-- 密码设置 start -->
        <div v-if="state.defaultActive==2">
          <div class="p20">
            <el-form ref="ruleFormRef"
            :rules="rules"
             :model="state.loginValidateForm" label-width="120px">
              <el-form-item label="密码" prop="password">
                <el-input v-model="state.loginValidateForm.password"></el-input>
              </el-form-item>
              <el-form-item label="验证密码" prop="checkPass">
                <el-input v-model="state.loginValidateForm.checkPass"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitPassword(ruleFormRef)">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
          <!-- 密码设置 end -->
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  toRef,
  toRefs,
  onBeforeMount,
  watch,
  onUpdated,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import LltMenu from "/@/layouts/components/menu.vue";
import LltHeader from "/@/layouts/components/header2.vue";
import { store } from "/@ts/store";
// import { resetPassword,resetUserinfo } from "/@ts/axios/urlApi/system";
import { useFullLoading } from "../hooks/fullLoading";
import { ElForm, ElMessage } from "element-plus";

const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const router = useRouter();
const route = useRoute();
const { openLoading, closeLoading } = useFullLoading();
onMounted(() => {
  closeLoading();
});
onMounted(() => {
  // getUserInfo();
});
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
const getUserInfo = () => {
  let data: string = localStorage.getItem(
    import.meta.env.VITE_USER_INFO_KEY as string
  ) as string;
  state.userInfo = JSON.parse(data);
};
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (state.loginValidateForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请验证密码'))
  } else if (value !== state.loginValidateForm.password) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
const rules = reactive({
     code: [{
      required: true,
      message: '请输入邮箱验证码',
      trigger: 'blur',
   }],
   username: [{
      required: true,
      message: '请输入名字',
      trigger: 'blur',
   }],
    email:[
      {
        required: true,
          type: 'email',
          message: '请输入邮箱地址',
          trigger: ['blur', 'change'],
        }
    ],
  password: [{ required: true, validator: validatePass, trigger: 'blur' }],
  checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
})
const state = reactive({
  userInfo: {},
  defaultActive:"1",
  loginValidateForm: {
    username: "",
    password: "",
    email:"",
    code:"",
    checkPass:""
  },
});
const handleSelect = (e: string) => {
  state.defaultActive = e
  switch (e) {
    case '1':
      //个人中心
      
      break;
  
    case '2':
       //设置密码
      break;
  }
};
const onSubmitPassword = (formEl: InstanceType<typeof ElForm> | undefined) => {

    if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
  //      resetPassword(state.loginValidateForm)
  // .then(res=>{
  //   ElMessage.success("操作成功")
  // })
    } else {
      console.log('error submit!')
      return false
    }
  })
};
const ruleFormRefuser = ref<InstanceType<typeof ElForm>>()
const onSubmitUser = (formEl: InstanceType<typeof ElForm> | undefined) => {

    if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
  //      resetUserinfo(state.userInfo)
  // .then(res=>{
  //   ElMessage.success("操作成功")
  //   localStorage.setItem(
  //   import.meta.env.VITE_USER_INFO_KEY as string,JSON.stringify(state.userInfo)
  // ) 
  // })
    } else {
      console.log('error submit!')
      return false
    }
  })
};
</script>

<style scoped lang="scss">
.layouts-admin {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  background-color: #f5f6f7;
}

.llt-layouts-body-admin {
  height: 100px;
  min-height: calc(100% - 0px);
  max-height: calc(100% - 0px);
  background-color: #f0f2f5;
  padding: 15px 100px;
}
// 路由切换动画
// .list-enter-active,
// .list-leave-active {
//   transition: all 0.5s ease;
// }
// .list-enter-from,
// .list-leave-to {
//   opacity: 0;
//   transform: translateY(30px);
// }
</style>
